<template>
  <div id="login">
    <div class="login-header">
      <div class="login-main">
        <div class="system-title">校园兼职平台</div>
      </div>
    </div>
    <div class="login-container">
      <div class="login-main">
        <div class="show"><img src="~@/assets/images/manage.png" /></div>
        <div class="box">
          <div class="title">系统登录</div>
          <el-form ref="loginForm" :model="form" :rules="rules">
            <el-form-item prop="account">
              <el-input
                v-model="form.account"
                class="login-user"
                placeholder="请输入用户名"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="form.password"
                class="login-pwd"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.rid" placeholder="请选择类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="login"
                class="login-btn"
                :loading="false"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!-- <Particles style="height: 100%; position: absolute; top: 0; z-index: -1">
    </Particles> -->
    <div class="login-footer">浏览器推荐使用Chrome、FireFox、IE8.0以上版本</div>
  </div>
</template>

<script>
// import qs from 'qs'
// import ParticlesJS from "../components/particles/ParticlesJs.vue";
export default {
  name: 'ILogin',
  components: {
    // Particles: ParticlesJS,
  },
  data () {
    return {
      form: {
        account: 'admin',
        password: '123456',
        rid: 2
      },
      options: [
        { label: '管理员', value: 1 },
        { label: '学生', value: 2 },
        { label: '企业', value: 3 },
        { label: '游客', value: 4 }
      ],
      rules: {
        account: [{ required: true, message: '用户名不能为空' }],
        password: [{ required: true, message: '密码不能为空' }]
      }
    }
  },
  methods: {
    login () {
      this.$refs.loginForm.validate((valid) => {
        // validate表单验证
        console.log('登录表单为:', this.form)
        this.$post('/user/login', this.form).then(res => {
          console.log('返回数据为:', res)
          this.$message.success(res.msg)
          if (res.data !== null) {
            this.$store.commit('setUserInfo', res.data)
            this.$store.commit('setToken', res.data.token)
            this.$router.push('/home')
          }
        })

        // if (valid) {
        //   // 用户登录操作
        //   // 调用store中的login异步请求
        //   this.$store
        //     .dispatch('login', this.form)
        //     .then((res) => {
        //       console.log(res, '====res')
        //       if (res.code === 200) {
        //         console.log('成功')

        //         this.$message.success('登录成功')
        //         this.$router.push('/')
        //       } else {
        //         this.$message.error(res.message)
        //       }
        //     })
        //     .catch((error) => {
        //       console.log(error)
        //     })
        // }
      })
    }
  }
}
</script>

<style scoped>
.login-header {
  height: 10%;
  width: 100%;
  position: absolute;
  top: 0px;
}
.login-container {
  width: 100%;
  position: absolute;
  top: 10%;
  bottom: 5%;
  background-color: #6699cc;
}
.login-main {
  width: 1100px;
  height: 100%;
  margin: auto;
}
.system-title {
  font-size: 36px;
  margin-top: 2%;
  font-weight: bold;
  color: #666666;
}
.show {
  float: left;
  position: absolute;
  bottom: 0;
  left: 150px;
  top: 0;
  padding-top: 80px;
  width: 750px;
  padding-bottom: 80px;
}
.show img {
  height: 100%;
  display: block;
  margin: 0 auto;
}

.box {
  width: 30%;
  padding: 20px 40px;
  float: right;
  background-color: #fff;
  border-radius: 5px;
  margin-top: 10%;

  box-shadow: 0 0 10px #2362a0;
}
.box .title {
  font-size: 18px;
  margin-bottom: 20px;
}
.login-btn {
  width: 100%;
  background-color: #7bbafa;
  border: 0px;
}
.login-btn:hover {
  width: 100%;
  background-color: #03a0d4;
  border: 0px;
}
.login-user >>> .el-input__inner {
  background: url("~@/assets/images/user.png") no-repeat center left;
  padding-left: 22px;
}
.login-pwd >>> .el-input__inner {
  background: url("~@/assets/images/password.png") no-repeat center left;
  padding-left: 22px;
}
.login-footer {
  position: absolute;
  bottom: 1vw;
  height: 5%;
  width: 100%;
  text-align: center;
  color: #999999;
  padding-top: 20px;
  font-size: 12px;
  box-sizing: border-box;
  background-color: #ffffff;
}
</style>
